<template>
  <div>
    <headerNav />
    <breadcrumb :showBack="true" :paramsType="'obj'"/>
    <div class="banner_details"></div>
    <div class="goodsDetails">
    <el-row :gutter="20">
      <el-col :span="8">
        <div class="grid-content">
          <div class="goodsImg">
            <div class="img"></div>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="grid-content center">
          <div class="title"><h2>{{shopInfo.name}}</h2></div>
          <div class="price">
            <dl>
              <dt>价格：</dt>
              <dd style="text-decoration: line-through;">¥{{shopInfo.price.money}}</dd>
            </dl>
            <dl>
              <dt>促销价：</dt>
              <dd class="goods_price">¥{{shopInfo.price.promotionPrice}}</dd>
              <dd class="right">
                <span class="name">评论：<span class="num">{{shopInfo.price.commontNums}}</span></span>
                <span class="name">累计销售量：<span class="num">{{shopInfo.price.saleNums}}</span></span>
              </dd>
            </dl>
          </div>
          <div class="select">
            <dl>
              <dt>数量：</dt>
              <dd><el-input-number v-model="num" :min="1" :max="10" label="描述文字"></el-input-number></dd>
              <dd class="kucun">库存574件</dd>
            </dl>
          </div>
          <div class="button">
            <el-row :gutter="20">
              <el-col :span="12"><div class="left" @click="buyGoods">立即购买</div></el-col>
              <el-col v-if="exeit" :span="12"><div class="right" @click="joinCar">加入购物车</div></el-col>
              <el-col v-else :span="12"><div class="right exist">已加入购物车</div></el-col>
            </el-row>
          </div>
          <div class="payment">支付方式：支付宝 微信 (默认支付宝)</div>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content">
          
        </div>
      </el-col>
    </el-row>
    </div>
  </div>
</template>

<script>
import headerNav from "@/components/index/headerNav";
import breadcrumb from "@/components/index/breadcrumb";
import { findByIdGoods,addGoodsCar,findByGoodsCar } from "@/js/api/home";
export default {
  name: "goodsDetails",
  components: {
    headerNav,
    breadcrumb,
  },
  data(){
    return {
      shopId:"",
      exeit:true,
      num:1,
      shopInfo:{
        name:'2020秋冬新款毛衣外套宽松高腰V领针织衫女套头短款上衣春秋',
        price:{
          money:'85.00',
          isPromotion:true,
          promotionPrice:'49.40'
        },
        commontNums:274,
        saleNums:1352,
      }
    }
  },
  computed:{
    goodsInfo:function(){
      if(this.$route.params.obj){
        return JSON.parse(this.$route.params.obj)
      }
      return null;
    }
  },
  created(){
    this.loadList()
  },
  methods:{
    loadList(){
      let obj = JSON.parse(this.$route.params.obj)
      if(obj.action==2){
        this.shopId = obj.id
      }else{
        this.shopId = obj.goodsId
      }
      findByIdGoods(this.shopId).then(response=>{
        if(response.data.state){
          this.shopInfo.name = response.data.data.goods_name
          this.shopInfo.price = {
            money:response.data.data.goods_price,
            isPromotion:true,
            promotionPrice:response.data.data.goods_price*0.8
          } 
          this.shopInfo.shopId = response.data.data.id
        }
      })
      if(this.$store.state.isLogin){
        let obj = {
          shopId:this.shopId,
          userId:window.localStorage.userId
        }
        findByGoodsCar(obj).then(response=>{
          if(response.data.state!=undefined && response.data.state){
            this.exeit = true
          }else{
            this.exeit = false
          }
        })
      }
    },
    buyGoods(){
      if(!this.$store.state.isLogin){
        let that = this
        this.confirm(function(){
          that.$router.push({path:"/login"})
        })
      }else{
        this.shopInfo.num = this.num
        this.shopInfo.price = this.shopInfo.price.isPromotion ? this.shopInfo.price.promotionPrice : this.shopInfo.price.money
        this.$router.push({name:'shoppingConfirm',query:{shopInfo:JSON.stringify(this.shopInfo),action:1}})
      }
    },
    joinCar(){
      if(!this.$store.state.isLogin){
        let that = this
        this.confirm(function(){
          that.$router.push({path:"/login"})
        })
      }else{
        let obj = {
          shopId:this.shopId,
          nums:this.num,
          userId:window.localStorage.userId
        }
        addGoodsCar(obj).then(response=>{
          if(response.data.state){
            this.utils.tips.success(response.data.msg)
            this.exeit = false
          }else{
            this.utils.tips.error(response.data.msg)
          }
        })
      }
    },
    confirm(fun){
      this.utils.tips.confirm("您还未登录，请先登录，点击登录跳转登录页面。",val=>{
        if(val) {
          fun()
        }
      })
    }
  }
}
</script>

<style lang="less">
.goodsDetails{
  margin-top: 20px;
  min-height: 500px;
  .grid-content{
    height: 500px;
    border: 1px solid red;
    .goodsImg{
      height: 100%;
      .img{
        height: 100%;
        width: 100%;
        background-image: url("~@/assets/img/goods/one.jpg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center center;
      }
    }
  }
  .center{
    width: 95%;
    display: flex;
    flex-direction:column;
    div{
      font-size: 14px;
      line-height: 30px;
      min-height: 50px;
    }
    .title h2{
      margin: 0;
    }
    .price{
      margin-top: 10px;
      background-color: #f6f6f6;
      dl{
        margin: 0;
        padding: 0 0 0 20px;
        position: relative;
        .goods_price{
          color: #ef2f23;
          font-size: 24px;
          display: inline-block;
          vertical-align: middle;
          font-weight: 700;
        }
        dt{
          color: #999;
          font-size: 12px;
        }
        dd{
          padding: 0 0 0 30px;
          color: #999;
          font-size: 14px;
          position: absolute;
          top: 0;
        }
        .right{
          position: absolute;
          right: 0px;
          .name{
            font-size: 12px;
            right: 1px;
            margin-right: 20px;
          }
          .num{
            color: #333;
          }
        }
      }
    }
    .select{
      dl{
        padding: 0 0 0 20px;
        position: relative;
        dd{
        padding: 0 0 0 20px;
          top: 0;
          position: absolute;
          .el-input__inner{
            height: 31px;
          }
        }
      }
      .kucun{
        left:240px;
        height: 25px;
        line-height: 32px;
        margin-left: 10px;
        color: #999;
      }
    }
    .button{
      margin-top: 20px;
      text-align: center;
      .el-col{
        position: relative;
      }
      .left{
        position: absolute;
        right: 10px;
        width: 200px;
        background-color: #ef2f23;
        line-height: 50px !important;
        font: 20px Microsoft YaHei;
        cursor: pointer;
        color: white;
      }
      .right{
        position: absolute;
        left: 10px;
        cursor: pointer;
        width: 200px;
        line-height: 50px !important;
        font: 20px Microsoft YaHei;
        border: 1px solid #ddd;
        color: #333;
      }
      .exist{
        background: #999;
        color: white;
      }
      // div{
      //   margin-left: 20px;
      //   display: inline-block
      // }
    }
    .payment{
      margin-top: 20px;
    }
  }
}
.banner_details{
  margin-top: 20px;
  height: 150px;
  background-image: url("~@/assets/img/goods/two.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
</style>